<template>
  <div class="flex-row justify-between myfont-12px">
    <div class="flex-column border-around justify-between margin-tb-xs" v-for="(group ,index ) in data_group" :keys="index"
         :style="{width:100 / data_group.length - (data_group.length > 1 ? 0.5 : 0) + '%'}">
      <div class="margin-sm text-bold flex-row justify-between align-center" v-if="group.title">
        <span>{{group.title}}</span>
        <div>
          <div v-if="show_button">
            <el-radio-group v-model="radio" size="mini" @change="selectTime">
              <el-radio-button label="td">今天</el-radio-button>
              <el-radio-button label="yd">昨天</el-radio-button>
              <el-radio-button label="All">全部</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="padding-tb flex-row">
        <div class="flex-row" v-for="(data, _index) in group.data_list" :keys="_index"
             :style="{width:100 / group.data_list.length + '%'}">
          <div class="col-line"></div>
          <div class="flex-column">
            <div class="margin-tb-xs">{{data.value}}</div>
            <div class="margin-tb-xs" v-if="data.value2">{{data.value2}}</div>
            <div class="margin-tb-xs">{{data.label}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import get_table from '@/utils/data_ctl'
  export default {
    name: 'dataGroup',
    components: {},
    props: ["show_button", "readonly",'table_name'],
    data() {
      return {
        // show_button:true,
        data_group: [],
        radio:'td',
      }
    },
    mounted() {

    },
    methods: {
      set_data_group(data) {
        this.$set(this, 'data_group', data)
      },
      selectTime(evt){
        // console.log(evt)
        this.$emit('select_time',evt)
      },
      get_data(){
        let server_data = {
          profit:'1000',
          total_amount:'514',
          toatl_count:'114',
          freeze_balance:'1919',
          balance:'819',
          prepay:'114514',
        }
        let table_name = 'default_list_data'
        let formatter = get_table(table_name).format
        let result = []
        for(let forma in formatter){
          let format = Object.assign({},formatter[forma])
          format.data_list.forEach(data=>{
            data.value = this.parse_data(data,server_data,'value')
            data.value2 = this.parse_data(data,server_data,'value2')
          })
          result.push(format)
        }
        this.set_data_group(result)
      },
      parse_data(data,server_data,prop){
        let str = null
        let value = data[prop] ? data[prop] : null
        if(value){
          switch (value) {
            case '-':
              str = '-'
              break
            default:
              let prefix = data[prop + '_prefix'] ? data[prop + '_prefix'] : ''
              let suffix = data[prop + '_suffix'] ? data[prop + '_suffix'] : ''
              str = prefix + server_data[value] + suffix
              break
          }
        }
        return str
      },
    }
  }
</script>

<style lang="scss" scoped>
</style>
